<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="zuoxian" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" class="zuokuang" />
            <div class="title">
              <div class="title-text">{{fuzhi}}</div>
              <dv-decoration-6
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                class="zhonghua"
              />
            </div>

            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              class="youkuang"
            />
          </div>
          <dv-decoration-10 class="youxian" />
        </div>
      </div>
      <div class="wofule el-icon-user" @click="guanli">管理中心</div>
      <!-- 第二行 -->
      <div class="d-flex jc-between px-2">
        <div class="toubu">
          <!-- 左部分 -->
          <div class="touzuo">
            <div class="d-flex ju">
<!--              <div class="react-right ml-4">-->
<!--                <span class="text"></span>-->
<!--              </div>-->
<!--              <div class="react-right bg-color-blue ml-3">-->
<!--                <span class="text fw-b"></span>-->
<!--              </div>-->
            </div>
          </div>
          <!-- 右部分 -->
          <div class="touyou">
            <div class="d-flex">
<!--              <div class="react-left bg-color-blue ml-3">-->
<!--                <span class="text fw-b" @click="she">管理中心</span>-->
<!--              </div>-->
<!--              <div class="react-left mr-4">-->
<!--                <span class="react-after"></span>-->
<!--                <span class="text"-->
<!--                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span-->
<!--                >-->
<!--              </div>-->
            </div>
          </div>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div class="centleft">
              <dv-border-box-10>
                <centerLeft1 />
              </dv-border-box-10>
            </div>
<!--            <div class="contleft2">-->
<!--              <dv-border-box-8>-->
<!--                <centerLeft2 />-->
<!--              </dv-border-box-8>-->
<!--            </div>-->
<!--            <div class="contleft3">-->
<!--              <dv-border-box-8>-->
<!--                <centerLeft3 />-->
<!--              </dv-border-box-8>-->
<!--            </div>-->
            <div class="centRight1">
              <dv-border-box-12>
                <centerRight1 />
              </dv-border-box-12>
            </div>
          </div>
          <div class="dibu">
            <dv-border-box-12>
            <centerRight2></centerRight2>
            </dv-border-box-12>
          </div>
          <!-- 第四行数据 -->
          <div class="ceshi">
            <div class="bottomright">
              <div class="ceshiyou">
                <dv-border-box-12>
                  <bottomRight />
                </dv-border-box-12>
              </div>
              <div class="contff">
                <dv-border-box-8>
                  <bottomLeft/>
                </dv-border-box-8>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>

  </div>
</template>

<script>
    // import {formatTime} from '../utils/index.js'
    import centerLeft1 from "./centerLeft1";
    // import centerLeft2 from "./centerLeft2";
    import centerRight1 from "./centerRight1";
    import centerRight2 from "./centerRight2";
    // import center from "./center";
    import bottomLeft from "./bottomLeft";
    import bottomRight from "./bottomRight";
    import { listCompanyname} from "@/api/lgdz/companyname";

    export default {
        data() {
            return {
              fuzhi:"",
                loading: false,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            };
        },
        components: {
            centerLeft1,
            // centerLeft2,
            // 上有
            centerRight1,
            centerRight2,
            // center,
            // 右下角
            bottomLeft,
            // 左下角
            bottomRight
        },
        mounted() {
          var h = document.getElementsByClassName('sidebar-container')
          // console.log(h)
          for (var i = 0; i < h.length; i++) {
            h[i].style.display = 'none'    //获取
          }
          this.getList()
        },
        methods: {
          getList() {
            listCompanyname(this.queryParams).then(response => {
              console.log(response)
              this.fuzhi = response.rows[0].companyName
            });
          },
          guanli(){
            this.$router.push("/lgdz/companydeviceinfo");
            // window.location.href="/lgdz/companydeviceinfo";
            window.close();
          }
        }
    };
</script>

<style lang="scss" scoped>
    @import '../assets/scss/index.scss';

    .zuoxian {
      width: 540px;
      /*background-color: #4AB7BD;*/
      height: 1px;
      margin-top: 15px;
    }
    .zuokuang {
      width: 260px;
      height: 50px;
      margin-top: 15px;
    }
    /*---中间部分---*/
    .zhonghua {
      width: 280px;
      height: 10px;
      margin-top: 35px;
    }
    .host-body{
      /*background-color: #1ab394;*/
    }
    .host-body .title{
      position: relative;
      width:280px !important;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;
      width: 700px;
      line-height:50px ;
      text-align: center;

    }
    /*#index .host-body .title .title-text[data-v-a83bd3b0] {*/
    /*  font-size: 35px !important;*/
    /*  position: absolute !important;*/
    /*  left: 140px !important;*/
    /*  !*background-color: #4AB7BD;*!*/
    /*  color: aliceblue !important;*/
    /*  width: 680px !important;*/
    /*  height: 40px !important;*/
    /*  line-height: 40px !important;*/
    /*  text-align: center !important;*/
    /*  top: 0 !important;*/
    /*}*/
    /*---右部分---*/
    .youkuang {
      width: 260px;
      height: 50px;
      margin-top: 15px;
    }
    .youxian {
      width: 540px;
      height: 1px;
      right: 0;
      margin-top: 15px;
      transform:rotateY(180deg) ;
    }

    .d-flex {
      display: inline-flex;
    }
    /*时间区域*/
    .contff {
      width: 800px;
      height: 865px;
      position: absolute;
      left:420px;
      top: 150px;
      overflow: hidden;
    }
    .centRight1{
        width: 700px;
        height: 400px;
        position: absolute;
        left: 1240px;
        top: 150px;
        /*right: 10px;*/
    }
    .wofule{
      width: 130px;
      height: 30px;
      /*background-color: #4AB7BD;*/
      line-height: 30px;
      color: #FFFFFF;
      position: absolute;
      left: 1800px;
      font-size: 20px;
      top: 20px;
    }
    .ceshiyou{
      width: 350px;
      height: 600px;
      margin-top: 20px;
    }
    .centleft{
      width: 350px;

    }
    .dibu{
      width: 700px;
      height: 430px;
      position: absolute;
      left: 1240px;
      top: 590px;
    }
</style>
